<template>
	<view class="medicineList">
		<!-- 搜索 -->
		<view class="search">
			<image src="../../static/search_b.png"></image>
			<input class="input_search" placeholder="搜索医生" maxlength="30" @confirm="Onsearch"
				placeholder-class="placeholderClass" />
		</view>
		<!-- 边框 -->
		<view class="medicine_border"></view>
		<!-- 列表 -->
		<view class="medicine_list">
			<view class="medicine_left">
				<view v-for="(item,index) in leftList" :key="index"
					:class="item.show?'background_ffffff':'background_f1f2f5'" @click="Onchoice(item)">
					<view :class="item.show?'font-323232':'font-9c9c9d'" class="font15 ellipsis">{{item.name}}</view>
				</view>
			</view>
			<view class="medicine_right">
				<view v-for="(item,index) in rightList" :key="index" class="medicine_rightR" @click="Onpages(item)"
					v-if="item.show">
					<!-- <view v-for="(item,index) in rightList" :key="index" class="medicine_rightR" @click="Onpages(item)" v-if="type!='hang'||(type=='hang'&&item.his_id != null)"> -->
					<view class="ellipsis font15">{{item.name}}</view>
					<image src="../../static/my/morea.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '', //类型
				sech: '', //input筛选
				//左边数据
				leftList: [],
				leftID: null, //左边ID
				//右边数据
				rightList: [],
				is_his: 0,
			}
		},
		onLoad: function(options) {
			this.type = options.type
			if (this.type == 'hang') {
				this.is_his = options.is_his
			}
			this.Onleft()
		},
		methods: {
			//获取列表左边的
			Onleft() {
				this.$Http({
					url: 'roomType',
					data: {},
					token: false
				}).then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							item.show = false
						})
						res.data[0].show = true
						this.leftList = res.data
						this.leftID = res.data[0].id
						this.OnRight(res.data[0].id)
						// this.medicineListR = res.data[0].child
					}
				});
			},
			//获取列表右边的
			OnRight(e) {
				this.$Http({
					url: 'room',
					data: {
						room_type_id: e
					},
					token: false
				}).then(res => {
					if (res.code == 1) {
						res.data.forEach(item=>{
							if(this.type == 'hang'){
								if(this.is_his == 1){
									if(item.his_id != null){
										item.show = true
									}else{
										item.show = false
									}
								}else{
									item.show = true
								}
							}
							if(this.type != 'hang'){
								item.show = true
							}
						})
						this.rightList = res.data
					}
				});
			},
			//选择
			Onchoice(e) {
				let res = e
				let list = this.leftList
				list.forEach(item => {
					item.show = false
					if (item.id == res.id) {
						item.show = true
						this.OnRight(item.id)
					}
				})
				this.leftList = list
			},
			//搜索
			Onsearch(e) {
				uni.navigateTo({
					url: '/pagesA/ask/sechlist?sech=' + e.detail.value
				});
			},
			//跳转
			Onpages(item) {
				//查看科室信息
				if (this.type == 'info') {
					uni.navigateTo({
						url: '/pagesA/info/department?id=' + item.id,
					})
				}
				//查看医生详情
				if (this.type == 'doc') {
					wx.navigateTo({
						url: '/pagesA/info/doclist?id=' + item.id + '&name=' + item.name,
					})
				}
				//挂号
				if (this.type == 'hang') {
					if (this.is_his == 1) {
						uni.navigateTo({
							url: '/pagesA/his/doclist/doclist?id=' + item.his_id,
						});
					} else {
						uni.navigateTo({
							url: '/pagesA/register/doclist?id=' + item.id,
						});
					}
				}
				//在线问诊
				if (this.type == 'line') {
					uni.navigateTo({
						url: '/pagesA/ask/doclist?id=' + item.id + '&code=' + this.leftID,
					})
				}
			}
		}
	}
</script>

<style>
	.medicineList {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	/* 搜索 */
	.search {
		width: 696rpx;
		height: 82rpx;
		background-color: #f9f9f9;
		border-radius: 10rpx;
		margin: 20rpx 27rpx 0 27rpx;
		display: flex;
		align-items: center;
		padding: 0 50rpx;
	}

	.search image {
		width: 28rpx;
		height: 28rpx;
		margin-right: 20rpx;
	}

	.input_search {
		width: 548rpx;
		height: 82rpx;
		font-size: 26rpx;
	}

	/* 边框 */
	.medicine_border {
		height: 14rpx;
		border-bottom: 2rpx solid #fefefe;
	}

	/* 列表 */
	.medicine_list {
		flex: 1;
		overflow: hidden;
		width: 750rpx;
		display: flex;
		height: 100%;
	}

	.medicine_left {
		width: 265rpx;
		height: 86rpx;
		line-height: 86rpx;
		height: 100%;
		overflow-y: scroll;
		background-color: #f1f2f5;
	}

	.background_ffffff {
		padding-left: 24rpx;
		background-color: #ffffff;
	}

	.background_f1f2f5 {
		padding-left: 24rpx;
		background-color: #f1f2f5;
	}

	.medicine_right {
		width: 485rpx;
		padding-left: 32rpx;
		height: 100%;
		overflow-y: scroll;
	}

	.medicine_rightR {
		height: 86rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #e8eaec;
	}

	.medicine_rightR view {
		width: 406rpx;
	}

	.medicine_rightR image {
		width: 18rpx;
		height: 22rpx;
	}
</style>
